import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Animate from 'rc-animate';
import objectAssign from 'object-assign';

let count=0;

class Toast extends Component {
  constructor(props){
    super(props);
    this.state={
      count:count
    }
  }

  render() {
    const style = {
      marginTop:(this.state.count)*70 + 10 + 'px',
      display: this.props.visible ? 'block' : 'none'
    };
    return (
      <div className="toast" style={style}>
        <i className="icon icon-fork" onClick={this.props.hide}></i>
        &nbsp;{this.props.msg}&nbsp;
      </div>
    );
  }
}

export default function (props) {

  const node = document.createElement('div');
  document.body.appendChild(node);

  class Temp extends Component {
    constructor(props) {
      super(props);

      let options;

      this.state = {
        autoClose: true,
        waitingTime: 6000,
        visible: false
      }

      options=objectAssign({},this.state,props);

      if(options.autoClose){
        setTimeout(function(){
          this.hide();
        }.bind(this),options.waitingTime);
      }

      this.hide = this.hide.bind(this);
      this.show = this.show.bind(this);
    }

    componentDidMount() {
      this.show();
    }

    show() {
      count++;
      this.setState({ visible: true });
    }

    hide() {
      count--;
      this.setState({ visible: false });
    }

    render() {
      return (<Animate
        showProp="visible"
        transitionName="toast-transiton"
        >
        <Toast {...props} ref="toast" visible={this.state.visible} hide={this.hide} />
      </Animate>
      )
    }

  }

  return ReactDOM.render(
    <Temp {...props} />,
    node
  );

}

